<template>
  <div class="home">

    <!-- <div>卡酷民宿项目</div> -->
    <!-- 表头内容 -->
    <mt-header title="卡酷公寓" fixed>
      <div slot="right" class="link">
        <router-link to="/register">注册</router-link>
        &nbsp;&nbsp;
        <router-link to="/login">登录</router-link>
      </div>
    </mt-header>
    <!-- 轮播图 -->
        <mt-swipe class="swipe" 
                  :style="{height:h}"
                  :auto="3000"
                  :speed="200"
                  :show-indicators="false"
                  :continuous="true">
          <mt-swipe-item>
            <img src="../assets/1.jpg" alt="">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="../assets/2.jpg" alt="">
          </mt-swipe-item>
          <mt-swipe-item>
            <img src="../assets/3.jpg" alt="">
          </mt-swipe-item>
            <mt-swipe-item>
            <img src="../assets/4.jpg" alt="">
          </mt-swipe-item>
            <mt-swipe-item>
            <img src="../assets/5.jpg" alt="">
          </mt-swipe-item>
           <mt-swipe-item>
            <img src="../assets/6.jpg" alt="">
          </mt-swipe-item>
        </mt-swipe>




 <!-- 底部选项卡 -->
    <mt-tabbar v-model='selected' fixed>
      <mt-tab-item id="home">首页
        <img v-if="selected=='home'" src="../assets/home_1.png" slot="icon" alt="">
        <img v-else src="../assets/home_0.png" slot="icon" alt="">

        
      </mt-tab-item>
      <mt-tab-item id="shoucang">收藏      
        <img v-if="selected=='shoucang'" src="../assets/sc_1.png" slot="icon" alt="">
        <img v-else src="../assets/sc_0.png" slot="icon" alt="">
        
      </mt-tab-item>
       <mt-tab-item id="dingdan"> 订单管理     
        <img v-if="selected=='dingdan'" src="../assets/dingdan_1.png" slot="icon" alt="">
        <img v-else src="../assets/dingdan_0.png" slot="icon" alt="">

       </mt-tab-item>
       <mt-tab-item id="wode"> 我的
        <img v-if="selected=='wode'" src="../assets/wo_1.png" slot="icon" alt="">
        <img v-else src="../assets/wo_0.png" slot="icon" alt="">
       </mt-tab-item>
    </mt-tabbar>


  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'home',
//       navactive: '1',
      h: '220px',
      category: [],
      articles: [],
      busy: false,
      page: 1,
      reachBottom: false   // 是否已经到达底部
    }
  },
  methods: {

    // 异步加载文章列表  通过callback执行回调
    // loadArticles(cid, page, callback){
    //   let url = `/articles?cid=${cid}&page=${page}`;
    //   this.axios.get(url).then(result=>{
    //     // 处理图片路径
    //     result.data.results.forEach(item=>{
    //       if(item.image){
    //         // // 通过require处理图片路径，重新赋值
    //         // item.image = require('../assets/articles/'+item.image)
    //       }
    //     })
    //     // 判断是否已经到达底部 
    //     if(this.page >= result.data.pagecount){
    //       // 当前页已经大于等于最大页数  => 到底了
    //       this.reachBottom = true;
    //     }
    //     // 执行回调方法  
    //     callback(result.data.results)
    //   })
    // },

    // 当触发触底事件后执行
    // showmore(){
    //   if(this.reachBottom){
    //     return;
    //   }
    //   // busy = true 发请求，拿响应，追加列表
    //   this.busy = true;
    //   let cid = this.navactive;
    //   this.page++;
    //   this.loadArticles(cid, this.page, (list)=>{
    //     // 把list，追加到当前列表末尾
    //     this.articles = this.articles.concat(list);
    //     this.busy = false;
    //   })

    // },

    // 初始化适配轮播图的高度
    initSwipe(){
      let picwidth = 1200;
      let picheight = 800;
      // 屏幕宽
      let screenwidth = window.screen.width;
      let height = Math.floor(
          (picheight * screenwidth) / picwidth) + 'px'
      // 把计算得到的height，赋值给data中的变量，动态更新轮播图
      this.h = height;   
    }
  },
  watch:{
    // 监听顶部导航的更新
    navactive(newval){
      // 把page变量重置为1 
      // this.page = 1;
      // this.loadArticles(newval, 1, (list)=>{
      //   this.articles = list;
      // })
    },

    // 如果watch中只接受了一个参数，vue将会自动传入新值
    selected(newval){
      if(newval=='home'){this.$router.push('/')
      }else if(newval == 'wode'){this.$router.push('/wode')
      }else if(newval == 'dingdan'){this.$router.push('/dingdan')
      }else if(newval == 'shoucang'){this.$router.push('/shoucang')}
    }
  },
  mounted() {
     //   // 发送http请求，获取UI类别下的第一页数据
    // this.loadArticles(1, 1, (list)=>{
    //   // list即是发送请求后 响应中的文章列表
    //   this.articles = list;
    // })

    // 发送http请求，获取类别列表
    // this.axios.get('/category').then(result=>{
    //   console.log(result)
    //   // 把服务端返回的类别数组存入data中
    //   // result.data.results里存储着类别数组 [{},{},{},{}]
    //   this.category = result.data.results
    // })

    // 初始化轮播图的高度
    this.initSwipe();
  },
}

</script>
<style scoped>
.link a{
  color: white;
} 
.swipe img{
  width: 100%;
  margin-top:32px;
}
.mint-header-title{
  font-size: 22px;
}


.articleItem {
  padding: 10px 0;
  margin: 0 10px;
  border-bottom: 1px solid #999;
}
.articleItem-header {
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
}
.articleItem-wrapper {
  display: flex;
  align-items: center;
  padding-top: 10px;
  width: 100%;
}
.articleImg {
  margin-right: 15px;
}
.articleImg img {
  width: 112px;
  height: 74px;
  border-radius: 5px;
}
.articleDes {
  height: 65px;
  font-size: 15px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 21px;
  letter-spacing: normal;
  color: #444;
}
.rb {
  background-color: #006699;
  color: white; text-align: center;
  height: 80px; line-height: 80px;
}
</style>
